//温度转换成纵坐标
function trans(degree){
return 10+(40-degree)*2;
}
//简单版绘制温度图表
function drawChart(canvasId, maxArr, minArr) {
var pi2 = Math.PI*2;
var canvas =document.getElementById(canvasId);    
var c =canvas.getContext("2d");

//绘制最高温度
c.moveTo(50, trans(maxArr[0]));
for(var i=1; i< 7; i++){
c.lineTo(50+150*i, trans(maxArr[i]));
}
c.strokeStyle="#eda60d";
c.stroke();
//绘制最低温度
c.beginPath();
c.moveTo(50, trans(minArr[0]));
for(var i=1; i< 7; i++){
c.lineTo(50+150*i, trans(minArr[i]));
}
c.strokeStyle="#67acf5";
c.stroke();
//绘制点
c.fillStyle = "#eda60d";
c.beginPath();
for(var i=0; i< 7; i++){
c.moveTo(50+150*i, trans(maxArr[i]));
c.arc(50+150*i, trans(maxArr[i]), 4, 0, pi2);
}
c.fill();
c.beginPath();
c.fillStyle = "#67acf5";
for(var i=0; i< 7; i++){
c.moveTo(50+150*i, trans(minArr[i]));
c.arc(50+150*i, trans(minArr[i]), 4, 0, pi2);
}
c.fill();
}
function init() {
var maxArr = [30,37,38,35,34,29,31];//最高温度
var minArr = [19,22,23,12,23,20,21];//最低温低
drawChart("canvas_circle", maxArr, minArr);
}
window.onload = init;